<template>
  <div>
    <div>
      {{ money }}
    </div>
    <!-- 
      1. 给按钮绑定点击事件
      2. 修改 money ++
     -->
     <!-- v-on 指令: 绑定事件 -->
     <!-- 
      语法:
      v-on:事件名="少量代码"
      v-on:事件名="事件处理函数"
      v-on:事件名="事件处理函数(参数)"
      简写 @事件名="事件处理函数"
      -->
      <button v-on:click="money++">+1</button>
      <button v-on:click="addMoney">+10</button>
      <!-- 注意: 传统理解中, 函数名() 表示调用该函数 -->
      <!-- 但是在此处, 不是调用函数, 而是绑定事件, 当事件触发时传入指定的参数 -->
      <button @click="addCMoney(2)">+2</button>
      <button @click="addCMoney(20)">+20</button>
  </div>
</template>

<script>
export default {
  // 定义数据
  data() {
    return {
      money: 100
      }
    },
    // 定义方法(函数)
    methods: {
      addMoney() {
         // 判断如果 money 到 200 就不允许继续加了
        if (this.money >= 200) return
        
        // 在函数中如何使用 data 中的数据?
        // 可以通过 this. 访问
        this.money += 10
      },
      addCMoney(num) {
        this.money += num
      }
    }
  }
</script>

<style>
 
</style>
